<style scoped>
   .dashboard-container{
    padding:20px;
    background-color: #ececec;
  }
  .c-header-title{
    text-align: left;
    font-size:16px;
    color:#555;
  }
  .c-header-extra{
    text-align: right;
    font-size:14px;
    color:#aaa;
  }
  .c-header-extra.tabs .tab{
    cursor: pointer;
  }
  .c-header-extra.tabs .tab-active{
    color:#0099CC;
  }
  .dashboard-container .cBody{
    text-align: left;
  }
  .dashboard-container .stat-t{
    font-size: 14px;
    color:#555;
  }
  .dashboard-container .stat-p{
    font-size: 26px;
    color:#000;
    font-weight: bolder;
  }
  .dashboard-container .stat-y{
    font-size: 12px;
    color:#999;
  }
  .sale-show-box,.sale-show-box li{
    list-style: none;
  }
  .sale-show-box li{
    padding:10px 0;
    text-align: left;
    border-bottom:1px solid #e2e2e2;
  }
  .sale-show-box .total{
    text-align: center;
  }
  .sale-show-box .per{
    text-align: center;
  }
  .member-box .stat-m{
    font-size:14px;
    line-height: 3.5;
  }
  .line-total-box{
    background-color: #fff;
  }
</style>
<template>
  <div class="page-container">
    <div class="dashboard-container">
      <a-card>
        <h3 slot="title" class="c-header-title">营业概况<span></span></h3>
        <div slot="extra" class="c-header-extra tabs">
          <span class="tab">
            <a-select :defaultValue="0" style='width: 120px' @change="onStoreChange">
              <a-select-option :value="0">门店</a-select-option>
              <a-select-option v-for="(store,sIndex) in storeList" :key="sIndex" :value="store.id">{{store.name}}</a-select-option>
            </a-select>
          </span>
          <a-divider type="vertical" />
          <span v-if="params.type !== 'custom'">
            <span :class="['tab',{'tab-active':params.type==='today'}]" @click="onTabChange('today')">今日</span>
            <a-divider type="vertical" />
            <span :class="['tab',{'tab-active':params.type==='yesterday'}]" @click="onTabChange('yesterday')">昨日</span>
            <a-divider type="vertical" />
            <span :class="['tab',{'tab-active':params.type==='week'}]" @click="onTabChange('week')">本周</span>
            <a-divider type="vertical" />
            <span :class="['tab',{'tab-active':params.type==='month'}]" @click="onTabChange('month')">本月</span>
          </span>
          <span v-else>
            <a-range-picker style="text-align: left;width:310px;margin-right:5px;"
                v-model="params.dates"
                :showTime="{ hideDisabledOptions: true,
                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
                format="YYYY-MM-DD HH:mm:ss"
            />
            <a-button type="primary" @click="onSearch">确定</a-button>
          </span>
          <a-divider type="vertical" />
          <a-button class="ant-btn-iconText color-green font16" shape="circle" size="small" icon="plus-circle" @click="onTabChange('custom')" v-if="params.type !== 'custom'"></a-button>
          <a-button class="ant-btn-iconText color-green font16" shape="circle" size="small" icon="close-circle" @click="onTabChange('today')" v-else></a-button>
        </div>
      </a-card>
      <a-row class="line-total-box" style="margin-top:20px;">
        <a-col :span="15">
          <line-chart :chartData="resp.goodsSalesVolume"/>
        </a-col>
        <a-col :span="8" :offset="1">
          <a-card-grid style="width:50%;height:120px;" class="grid-card">
            <div class="cBody">
              <p class="stat-p">{{fmMoney(resp.amountTotal,2)}}</p>
              <p class="stat-t">营业总额(元)</p>
            </div>
          </a-card-grid>
          <a-card-grid style="width:50%;height:120px;" class="grid-card">
            <div class="cBody">
              <p class="stat-p">{{fmMoney(resp.memberRechargeTotal,2)}}</p>
              <p class="stat-t">会员储值(元)</p>
            </div>
          </a-card-grid>
          <a-card-grid style="width:50%;height:120px;" class="grid-card">
            <div class="cBody">
              <p class="stat-p">{{fmMoney(resp.storeReceipts,2)}}</p>
              <p class="stat-t">门店实收(元)</p>
            </div>
          </a-card-grid>
          <a-card-grid style="width:50%;height:120px;" class="grid-card">
            <div class="cBody">
              <p class="stat-p">{{fmMoney(resp.webShopReceipts,2)}}</p>
              <p class="stat-t">网店实收(元)</p>
            </div>
          </a-card-grid>
          <a-card-grid style="width:50%;height:120px;" class="grid-card">
            <div class="cBody">
              <p class="stat-p">{{resp.storeOrderCount}}</p>
              <p class="stat-t">门店支付订单数(笔)</p>
            </div>
          </a-card-grid>
          <a-card-grid style="width:50%;height:120px;" class="grid-card">
            <div class="cBody">
              <p class="stat-p">{{resp.webShopOrderCount}}</p>
              <p class="stat-t">网店支付订单数(笔)</p>
            </div>
          </a-card-grid>
        </a-col>
      </a-row>
      <a-card style="margin-top:20px;">
        <h3 slot="title" class="c-header-title">商品<span></span></h3>
        <div slot="extra" class="c-header-extra"></div>
        <a-card-grid style="minWidth:'180px';width:25%;height:100px;" class="grid-card">
          <div class="cBody">
            <p class="stat-p">{{fmMoney(resp.goodsPurchase.amounttotal,2)}}</p>
            <p class="stat-t">采购金额(元)</p>
          </div>
        </a-card-grid>
        <a-card-grid style="minWidth:'180px';width:25%;height:100px;" class="grid-card">
          <div class="cBody">
            <p class="stat-p">{{resp.goodsPurchase.kindtotal}}</p>
            <p class="stat-t">采购数量(种)</p>
          </div>
        </a-card-grid>
        <a-card-grid style="minWidth:'180px';width:25%;height:100px;" class="grid-card">
          <div class="cBody">
            <p class="stat-p">{{fmMoney(resp.goodsLoss.amounttotal,2)}}</p>
            <p class="stat-t">报损金额(元)</p>
          </div>
        </a-card-grid>
        <a-card-grid style="minWidth:'80px';width:12.5%;height:100px;" class="grid-card">
          <div class="cBody">
            <p class="stat-p">{{fmMoney(resp.goodsLoss.counttotal,2)}}</p>
            <p class="stat-t">报损数量(件)</p>
          </div>
        </a-card-grid>
        <a-card-grid style="minWidth:'80px';width:12.5%;height:100px;" class="grid-card">
          <div class="cBody">
            <p class="stat-p">{{resp.goodsLoss.kindtotal}}</p>
            <p class="stat-t">报损种类(种)</p>
          </div>
        </a-card-grid>
      </a-card>
      <a-card style="margin-top:20px;">
        <h3 slot="title" class="c-header-title">商品消费单数排行<span></span></h3>
        <div slot="extra" class="c-header-extra tabs">
          <span  :class="['tab',{'tab-active':params.orderBy==='totalNum'}]" @click="onChangeOrderBy('totalNum')">销量</span><a-divider type="vertical" />
          <span :class="['tab',{'tab-active':params.orderBy==='totalAmount'}]"  @click="onChangeOrderBy('totalAmount')">金额</span>
        </div>
        <ul class="sale-show-box">
          <li v-for="goods in resp.goodsList" v-if="params.orderBy == 'totalNum'">
            <a-row>
              <a-col :span="15">
                <span>{{goods.name}}</span>
                <a-progress :percent="goods.percent" status="active" :showInfo="false" />
              </a-col>
              <a-col :span="3" class="total">数量 <span class="color-dodgerblue">{{goods.totalnum}}</span> 份</a-col>
              <a-col :span="3" class="per">占比 <span class="color-dodgerblue">{{goods.tRatio}}</span></a-col>
              <a-col :span="3" class="per">环比 <span class="color-dodgerblue">{{goods.hRatio}}</span></a-col>
            </a-row>
          </li>
          <li v-for="goods in resp.goodsList" v-if="params.orderBy == 'totalAmount'">
            <a-row>
              <a-col :span="15">
                <span>{{goods.name}}</span>
                <a-progress :percent="goods.percent" status="active" :showInfo="false" />
              </a-col>
              <a-col :span="3" class="total">金额 <span class="color-dodgerblue">{{goods.totalamount=='--'?'--':fmMoney(goods.totalamount,2)}}</span> 元</a-col>
              <a-col :span="3" class="per">占比 <span class="color-dodgerblue">{{goods.tRatio}}</span></a-col>
              <a-col :span="3" class="per">环比 <span class="color-dodgerblue">{{goods.hRatio}}</span></a-col>
            </a-row>
          </li>
        </ul>
      </a-card>
    </div>
  </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import {LineChart} from '@/components/charts'
    import {findSaleStat} from "../../api/dashboard";
    import {findShopList} from "../../api/terminal";
    import {fmMoney} from "../../utils";
    import moment from 'moment';
    import 'moment/locale/zh-cn';
    moment.locale('zh-cn');

    export default {
      components: { LineChart},
        data() {
            return {
              storeList:[],//门店列表
              resp:{
                  goodsSalesVolume:{ xData:[], legendData:["今日"],seriesData:[[]] },
                  goodsLoss:{
                    amountotal:0.00,
                    counttotal:0.00,
                    kindtotal:0
                  },
                  goodsPurchase:{
                      amountotal:0.00,
                      kindtotal:0,
                  }
              },
              params:{
                  shopId:null,
                  type:'today',
                  beginDate:moment().format("YYYY-MM-DD 00:00:00"),
                  endDate: moment().format("YYYY-MM-DD 23:59:59"),
                  dates:[],
                  orderBy:'totalNum',
              }
            }
        },
        computed: {
            ...mapGetters([
                'roles','userId'
            ]),
        },
        methods:{
          moment,
          fmMoney,
          onStoreChange(value, option){
            this.params.shopId = value==0?null:value;
            this.onLoad();
          },
          onTabChange(tab){
            if(this.params.type == tab) return;
            switch(tab){
              case "today":
                this.params.beginDate = moment().format("YYYY-MM-DD 00:00:00");
                this.params.endDate = moment().format("YYYY-MM-DD 23:59:59");
                break;
              case "yesterday":
                this.params.beginDate = moment().subtract(1, 'days').format("YYYY-MM-DD 00:00:00");
                this.params.endDate = moment().subtract(1, 'days').format("YYYY-MM-DD 23:59:59");
                break;
              case "week":
                let weekOfDay = moment().format('E');//计算今天是这周第几天
                this.params.beginDate = moment().subtract(weekOfDay-1, 'days').format('YYYY-MM-DD 00:00:00');//周一日期
                this.params.endDate = moment().add(7-weekOfDay, 'days').format('YYYY-MM-DD 23:59:59');//周日日期
                break;
              case "month":
                this.params.beginDate = moment().format('YYYY-MM-01 00:00:00');//本月一号日期
                this.params.endDate = moment(this.params.beginDate).add(1,"months").subtract(1, 'days').format('YYYY-MM-DD 23:59:59');//本月最后一天日期
                break;
              case "custom":
                this.params.beginDate = moment().subtract(14,"days").format('YYYY-MM-DD 00:00:00');//本月一号日期
                this.params.endDate = moment().format('YYYY-MM-DD 23:59:59');//本月最后一天日期
                this.params.dates = [moment(this.params.beginDate),moment(this.params.endDate)];
                break;
            }
            this.params.type = tab;
            this.onLoad();
          },
            onChangeOrderBy(orderBy){
                  this.params.orderBy = orderBy;
                  this.onLoad();
            },
          onSearch() {
            //                :defaultValue="[moment(params.beginDate, 'YYYY-MM-DD HH:mm:ss'), moment(params.endDate, 'YYYY-MM-DD HH:mm:ss')]"
            if (this.params.dates.length == 0) {
              this.$message.info('请选择查询日期');
              return;
            }
            this.params.beginDate = this.params.dates[0].format('YYYY-MM-DD HH:mm:ss');
            this.params.endDate = this.params.dates[1].format('YYYY-MM-DD HH:mm:ss');
            this.onLoad();

          },
          async loadStoreList(){
            let resp = await findShopList();
            if(resp && resp.code == 0) {
              this.storeList = resp.data.shopList;
            }
          },
            async onLoad(){
              let resp = await findSaleStat(this.params);
              if(resp && resp.code == 0 && resp.data != null) {
                  this.resp = resp.data;
                  // console.log("goodsSalesVolume===>",this.resp.goodsSalesVolume);
              }else{
                  this.$error({title:'请求失败!',okText:'确定'});
              }
            }
        },
        mounted(){
          this.onTabChange(this.params.type);
          this.loadStoreList();
          this.onLoad();
        }
    }
</script>
